import { Row, Col, Tag } from 'antd'

import styles from './FeedItem.module.scss'
import FeedItemToolbar from './FeedItemToolbar'
import SubmitUser from './SubmitUser'

export default function FeedItem({ feed }) {
  return (
    <div className={styles.feedItem}>
      <Row>
        <Col flex="120px">
          <a href="" className={styles.thumbLink}>
            <img className={styles.thumb} src={feed.imgUrl} alt="" />
          </a>
        </Col>
        <Col flex="1" className={styles.feedContent}>
          <div className={styles.tag}>
            <Tag color='#f4962f' className={styles.tagText}>
              {feed.topicName}
            </Tag>
          </div>
          <div className={styles.title}>{feed.title}</div>
          <div className={styles.source}>{feed.domain}</div>
          <div className={styles.info}>
            <Row>
              <Col flex="1">
                <SubmitUser
                  user={feed.submittedUser}
                  time={feed.createdTime/1000}
                />
              </Col>
              <Col flex="200px"
                style={{textAlign: 'right'}}>
                <FeedItemToolbar feed={feed} />
              </Col>
            </Row>

          </div>
        </Col>
      </Row>
    </div>
  )
}
